<template>
  <div>
    <div class="container">
      <!-- 头部 -->
      <div class="nav">
        <div class="nav_wrap">
          <div class="quit" @click="$router.back()"></div>
          <span>书籍详情</span>
          <div class="nav_icon">
            <router-link tag="a" to="/shelf"></router-link>
            <i v-show="!isTop" @click="topShow"></i>
            <i class="topnav" v-show="isTop" @click="topShow"></i>
          </div>
        </div>
      </div>
      <div class="wrap" v-show="isTop" @click.self="topShow">
        <div class="subnav">
          <ul>
            <router-link tag="li" to="/">
              <img src="../assets/images/tp_1.png" alt="">
              <span>首页</span>
            </router-link>
            <router-link tag="li" to="/library">
              <img src="../assets/images/tp_02.png" alt="">
              <span>书库</span>
            </router-link>
            <router-link tag="li" to="/shelf">
              <img src="../assets/images/tp_03.png" alt="">
              <span>书架</span>
            </router-link>
            <router-link tag="li" to="/user">
              <img src="../assets/images/tp_04.png" alt="">
              <span>账户</span>
            </router-link>
            <router-link tag="li" to="/pay">
              <img src="../assets/images/tp_05.png" alt="">
              <span>充值</span>
            </router-link>
            <router-link tag="li" to="/search">
              <img src="../assets/images/tp_06.png" alt="">
              <span>搜索</span>
            </router-link>
          </ul>
        </div>

      </div>
      
      <!-- 书本信息 -->
      <div class="header bor_bot" v-if="booksData">
        <div class="head_cont">
          <div class="img">
            <img :src="booksData.iconUrl" alt="">
          </div>
          <div class="head_info">
            <h2>{{ booksData.title }}</h2>
            <p>作者：{{ booksData.author}}</p>
            <p>分类：{{ booksData.category }}</p>
            <p>字数：{{ booksData.showTotalCount }}</p>
            <p>今日阅读：{{ booksData.readCount }}</p>
          </div>
          <div class="head_type">
            <img src="../assets/images/sucess_ico2.png" alt="" v-if="booksData.bookStatus">
            <img src="../assets/images/sucess_ico1.png" alt="" v-else>
          </div>
        </div>
        <div class="head_btn">
          <router-link tag="div" :to="{ path: '/list', query: { pages: bookInd }}" class="read"><span>免费阅读</span></router-link>
          <div class="down"></div>
          <div :class="[shelf ? 'bookshelf':'down']" @click="bookShelf"><span>{{shelf? '已在' : '加入'}}书架</span></div>
        </div>

        <div class="head_recom">
          全网火爆主角林浩白千羽星月神婿
        </div>
      </div>
      <!-- 简介 -->
      <div class="list_books bor_bot">
        <div class="books_tit">
          简介
        </div>
        <div class="books_intro" v-if="booksData">
          <p>{{ booksData.description }}</p>
        </div>
      </div>
      <!-- 目录 -->
      <div class="list_books bor_bot" v-if="catalogue">
        <div class="books_tit">
          目录
          <span>{{ catalogue.index }}章</span>
        </div>
        <router-link tag="div" :to="{ path: '/list', query: { pages: bookInd }}" class="books_intro">
          <span>最新章节：{{ catalogue.navLabel | titSex }}</span>
          <span class="time">2021-03-01</span>
        </router-link>
      </div>

      <!-- 作品互动 -->
      <div class="list_books bor_bot">
        <div class="books_tit books_tit_le">
          作品互动
          <span>我要投票</span>
        </div>
        <div class="books_vote">
          <ul>
            <li>
              <img src="../assets/images/pic_tjp.png" alt="">
              <h5>推荐票</h5>
              <span>0票</span>
            </li>
            <li>
              <img src="../assets/images/pic_yp.png" alt="">
              <h5>月票</h5>
              <span>0票</span>
            </li>
            <li>
              <img src="../assets/images/pic_cgp.png" alt="">
              <h5>催更票</h5>
              <span>0票</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 评论 -->
      <div class="comment bor_bot">
        <div class="comment_tit">
          <span v-if="comment">评论 <em>({{ comment.length }})</em></span>
          <router-link tag="em" to="/comm">我要评论</router-link>
        </div>
        <div class="comment_cont">
          <ul v-if="comment">
            <li v-for="(item) in comment.slice(0,2)" :key="item.posttime">
              <div class="author">
                <img src="../assets/images/user.png" alt="">
              </div>
              <div class="com_major">
                <h2>{{item.username}}</h2>
                <p>{{ item.text }}</p>
                <div class="time">
                  {{ item.posttime }}
                  <a href="javascript:;"></a>
                </div>
                <div class="listCom" v-if="item.replied">
                 <div class="list_head">
                  <div class="list_name">{{ item.replied.username }}</div>
                  
                  <div class="time">
                    {{ item.replied.posttime }}
                  </div>
                 </div>
                 <div class="list_cont">
                    {{ item.replied.text}}
                 </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="com_more">
            更多评论
            <img src="../assets/images/timeJt.png" alt="">
          </div>
        </div>
      </div>
      <!-- 大家都在看 -->
      <div class="list_books bor_bot">
        <div class="books_tit">
          大家都在看
        </div>
        <div class="books_cont">
          <ul v-if="booksAll">
            <li v-for="(item,index) in booksAll.slice(0,3)" :key="index">
              <div class="img">
                <img :src="item.iconUrl" alt="">
              </div>
              <div class="intro">
                <div class="in_tit">
                  {{ item.title }}
                </div>
                <p>
                  {{ item.description }}
                </p>
                <div class="in_foot">
                  <div class="state">
                    <span>{{ item.bookStatus ? '完结' : '连载'}}</span>
                  </div>
                  <div class="book_type">
                    <span class="book_num">{{ item.showTotalCount }}</span>
                    <span>{{ item.category }}</span>
                  </div>
                </div>
              </div>
            </li>
            
          </ul>
        </div>
      </div>
      <!-- 读过本书的人还读过 -->
      <div class="list_books bor_bot">
        <div class="books_tit">
          读过本书的人还读过
        </div>
        <div class="books_list">
          <ul v-if="booksAll">
            <li v-for="(item,index) in booksAll.slice(3,6)" :key="index">
              <div class="img">
                <img :src=" item.iconUrl " alt="">
              </div>
              <span>{{item.title}}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 搜索框 -->
      <router-link tag="div" to="/search" class="search">
        <div class="search_wrap">
          <input type="text">
          <button></button>
        </div>
      </router-link>
      <!-- 页脚信息 -->
      <div class="footer">
        <div class="foot_tit">
          <ul>
            <li>
              <a href="javascript:;">首页</a>
            </li>
            <li>
              <a href="javascript:;">书库</a>
            </li>
            <li>
              <a href="javascript:;">书架</a>
            </li>
            <li>
              <a href="javascript:;">账户</a>
            </li>
            <li>
              <a href="javascript:;">客户端</a>
            </li>
          </ul>
        </div>
        <div class="foot_cont">
          <div class="foot_info">
            <p>客服QQ群：326738643</p>
            <p>客服电话：010-86462015-800</p>
            <p>©2020北京爱书客科技有限公司</p>
            <p>京ICP备13037522号</p>
          </div>
          <div class="info_img">
            <img src="../assets/images/ledu.png" alt="">
            <span>乐读书城</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getJsonData } from '../api/home';
import { getCommentData } from '../api/comment';
import { getListData } from '../api/list';
  export default {
    data(){
      return{
        booksData:null,//当前书籍的信息
        bookInd:0,//首页传过来的书籍的下标【id】
        booksAll:null,//除当前详情书籍外的其他书籍信息
        comment:null,//评论数据
        catalogue:null,//最新目录
        shelf:false,//判断是否加入书架
        isTop:false,//判断子菜单的展示
      }
    },
  created() {
    this.bookInd = this.$route.query.userId;
    console.log(this.bookInd);//0
    
    getJsonData().then(data => {
      this.booksData = data.data.books[this.bookInd];
      console.log(this.booksData.sourceUrl);//69531863f5f94823a075dac386df3444_4
      //  var tid = this.booksData.sourceUrl;
      this.booksAll = data.data.books;
      this.booksAll.splice(this.bookInd, 1);

      
      // getListData({ tocId: tid }).then(data => {
      //   console.log(data,'getListData');
      //   let arr = data.ncx.navMap.navPoint;
      //   if (Array.isArray(arr) == false) {
      //     arr = arr.navPoint;
      //   }
      //   this.catalogue = arr[arr.length - 1];
      //   console.log(this.catalogue, 'cat');
      // })
      
      getListData().then(data => {
        let arr = data.data[this.bookInd];
        arr = arr.ncx.navMap.navPoint;
        this.catalogue = arr[arr.length-1];
        console.log(arr,'arr');

      })

      
    })

    getCommentData().then(data => {
      this.comment = data.data.data
    })

    
    
    this.isShelf();
  },
  filters: {
    titSex(val) {
      val = val.split("");
      val.splice(0, 1);
      return val.join("")
    }
  },
  methods:{
    bookShelf(){
      this.shelf = !this.shelf;
      console.log(this.catalogue.navLabel);
      if(this.shelf){
        // console.log('加入书架');
        console.log(this.booksData);

        //判断是否为书架的第一本书
        if (sessionStorage.getItem("bookArr") == null){

          let arr = [];//没有书架数据，创建第一条书籍信息
          let booksData = this.booksData;

          booksData.new = this.catalogue.navLabel;//添加信息，书籍的最新章节

          arr.push(booksData);
          sessionStorage.setItem('bookArr', JSON.stringify(arr));
          
          
          let ind = [];//存储书本下标（id）
          ind.push(this.bookInd);
          sessionStorage.setItem('bookInd', JSON.stringify(ind));

        } else {
          //获取原有的书架信息
          let arr = sessionStorage.getItem("bookArr");
          arr = JSON.parse(arr);//还原成可操作的数组

          let booksData = this.booksData;
          booksData.new = this.catalogue.navLabel;//添加信息，书籍的最新章节
          arr.push(booksData);
          sessionStorage.setItem('bookArr', JSON.stringify(arr))
          
          //书本下标
          let ind = sessionStorage.getItem("bookInd");
          ind = JSON.parse(ind);
          ind.push(this.bookInd);
          sessionStorage.setItem('bookInd', JSON.stringify(ind))
          
        }


      }else{
        // 书本被移出书架
        let arr = sessionStorage.getItem("bookArr");
        arr = JSON.parse(arr);
        arr.pop();//从末尾移出
        sessionStorage.setItem('bookArr', JSON.stringify(arr));
        console.log('移出书架');
        
        //书本下标（id）
        let ind = sessionStorage.getItem("bookInd");
        ind = JSON.parse(ind);
        ind.pop();//从末尾移出
        sessionStorage.setItem('bookInd', JSON.stringify(ind));


      }
    },
    isShelf(){
      if (sessionStorage.getItem("bookInd") == null){
        return
      }
      let isArr = sessionStorage.getItem("bookInd");
      isArr = JSON.parse(isArr);
      isArr.forEach(item => {
        if(item == this.bookInd){
          this.shelf = true
        }
      });

    },
    topShow(){
      this.isTop = !this.isTop
    }
  }
  }
</script>

<style lang="scss" scoped>
.nav {
   background-color: #fff;

   .nav_wrap {
     padding: 0 14px;
     border-bottom: 1px solid #e0e0e0;
     display: flex;

     .quit {
       width: 10px;
       height: 45px;
       background-image: url('../assets/images/quit.png');
       background-repeat: no-repeat;
       background-size: 100%;
       background-position: center;
     }

     span {
       color: #333;
       font-size: 16px;
       display: block;
       text-align: center;
       line-height: 45px;
       width: 54%;
       padding-left: 70px;
     }

     .nav_icon {
       display: flex;
       align-items: center;
       justify-content: space-between;
       width: 80px;

       a {
         display: block;
         width: 25px;
         height: 22px;
         background-image: url('../assets/images/book_ico1.png');
         background-repeat: no-repeat;
         background-size: 100%;
         background-position: center;
       }

       i {
         display: block;
         width: 20px;
         height: 20px;
         background-image: url('../assets/images/bookMore_ico1.png');
         background-size: 100%;
         background-position: center;

       }

       .topnav {
         background-image: url('../assets/images/tp_close.png');
       }
     }
   }
 }
.wrap{
  position: fixed;
  top: 45px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0,0, .8);
 
  .subnav{
    width: 100%;
    background-color: #fff;
    padding-bottom: 18px;
    ul{
      display: flex;
      flex-wrap: wrap;
      li{
        width: 25%;
        text-align: center;
        padding-top: 20px;
        img{
          width: 40px;
          height: 40px;
          margin: 0 auto 8px auto;
        }
        span{
          font-size: 13px;
          color: #666;
        }
      }
    }
  }

}
.header{
  padding-top: 18px;
  .head_cont{
    padding: 0 14px 11px 14px;
    display: flex;
    .img{
      padding-right: 15px;
      img{
        width: 88px;
        height: 131px;
      }
    }
    .head_info{
      width: 42%;
      h2{
        font-size: 17px;
        color: #333;
        font-weight: 500;
        height: 23px;
        line-height: 23px;
        padding-bottom: 6px;
      }
      p{
        height: 21px;
        line-height: 21px;
        color: #595959;
        font-size: 12px;
      }
    }
    .head_type{

      img{
        width: 84px;
        height: 67px;
        margin: 32px 0;
      }
    }
  }
  .head_btn{
    display: flex;
    padding: 0 14px 14px 14px;
    span{
      width: 104px;
      display: block;
      
      height: 33px;
      line-height: 33px;
      border: 1px solid #fff;
      text-align: center;
      border-radius: 6px;
    }
    .read{
      flex: 1;
      &>span{
        background-color: #ea4136;
        border-color: #ea4136;
        color: #fff;
      }
    }
    .down{
      flex: 1;
      &>span{
        background-color: #fff;
        color: #ea4136;
        border-color: #ea4136;
        margin: auto;
      }
    }
    .bookshelf{
      flex: 1;
      &>span{
        background-color: #eee;
        border-color: #eee;
        color: #999;
        margin-left: 9px;
      }
    }
  }
  .head_recom{
    font-size: 15px;
    color: #666;
    height: 41px;
    line-height: 41px;
    padding-left: 45px;
    background-image: url('../assets/images/noticeIco.png');
    background-position: 15px center;
    background-size: 20px;
    background-repeat: no-repeat;
    border-top: 1px solid #ebebeb;
  }
}

.search {
  padding: 10px 14px;

  .search_wrap {
    display: flex;
    padding: 4px 0 4px 17px;
    border: 1px solid #dbdbdb;
    height: 32px;
    border-radius: 20px;
    overflow: hidden;

    &>input {
      border: 0px;
      outline: none;
      flex: 6;
      color: #999;
    }

    &>button {
      flex: 1;
      background-image: url('../assets/images/searchBar.png');
      background-repeat: no-repeat;
      border: 0px;
      background-color: #fff;
      position: relative;
      border-left: 1px solid #dbdbdb;
      background-size: 18px;
      background-position: center;
    }
  }
}
.footer {
  padding: 16px 0px 32px 0px;
  background-color: #1c1a1a;

  .foot_tit {
    padding-bottom: 15px;

    ul {
      display: flex;

      li {
        flex: 1;

        a {
          display: block;
          font-size: 16px;
          color: #b6b6b6;
          text-align: center;
          border-right: 1px solid #999999;

        }

        &:last-of-type {
          a {
            border: 0px;
          }
        }
      }
    }
  }

  .foot_cont {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;

    .foot_info {
      p {
        color: #b6b6b6;
        font-size: 12px;
        line-height: 28px;
      }
    }

    .info_img {
      img {
        width: 98px;
        height: 98px;
      }

      span {
        font-size: 12px;
        display: block;
        text-align: center;
        color: #b6b6b6;
        padding-top: 3px;
      }
    }
  }
}
.bor_bot {
  border-bottom: 10px solid #eaeaea;
}
.list_books {
  padding: 0 14px;
  .books_intro{
    display: flex;
    justify-content: space-between;
    p{
      padding: 9px 0 18px 0;
      font-size: 14px;
      color: #595959;
      text-indent: 28px;
      line-height: 22px;
    }
    span{
      color: #666;
      display: block;
      font-size: 15px;
      height: 57px;
      line-height: 57px;
      overflow: hidden;
    }
    .time{
      color: #999;
      font-size: 13px;
      padding-right: 12px;
      background-image: url('../assets/images/timeJt.png');
      background-repeat: no-repeat;
      background-position: right center;
      background-size: 10px;
    }
  }

  .books_tit {
    padding-left: 8px;
    height: 52px;
    line-height: 52px;
    border-bottom: 1px solid #ebebeb;
    background-image: url('../assets/images/daohang_redIco.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 4px;
    color: #333;
    font-size: 16px;
    
    span{
      font-size: 16px;
      color: #999;
    }
    
  }
  .books_tit_le {
    display: flex;
    justify-content: space-between;
  }
  .books_vote{
    padding: 13px 21px;
    ul{
      display: flex;
      justify-content: space-between;
      li{
        text-align: center;
        img{
          width: 27px;
          height: 27px;
          margin: 0 auto 7.5px auto;
        }
        h5{
          font-size: 12px;
          color: #333;
        }
        span{
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
  .books_cont {
    .sort_uls {
      padding-bottom: 0px;
    }

    ul {
      padding-bottom: 28px;

      li {
        display: flex;
        padding-top: 24px;

        .img {
          flex: 1;

          img {
            width: 100px;
            height: 140px;
          }
        }

        .intro {
          flex: 2;
          padding-left: 5px;

          .in_tit {
            height: 47px;
            color: #666;
            font-size: 18px;
          }

          &>p {
            height: 47px;
            line-height: 22px;
            font-size: 13px;
            color: #999;
            overflow: hidden;
          }
        }

        .in_foot {
          display: flex;
          justify-content: space-between;
          padding-top: 29px;

          span {
            border: 1px solid #fff;
            display: block;
            font-size: 12px;
            height: 10px;
            line-height: 10px;
            padding: 2px 3.5px;
          }

          .state {
            span {
              border-color: #ea4136;
              color: #ea4136;
            }
          }

          .book_type {
            display: flex;

            .book_num {
              border-color: #f39800;
              color: #f39800;
              margin-right: 6px;
            }

            span {
              border-color: #706262;
              color: #706262;
            }
          }
        }
      }
    }
  }

  .books_list {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-bottom: 23px;

      li {
        padding-top: 18px;
        width: 30%;

        .img {
          img {
            width: 104px;
            height: 145px;
            display: block;
          }
        }

        span {
          display: block;
          font-size: 13px;
          color: #666;
          padding-top: 6px;
          height: 37px;
        }

      }


    }
  }


}
.comment{
  padding: 0 14px;
  .comment_tit{
    padding-left: 8px;
    height: 52px;
    line-height: 52px;
    border-bottom: 1px solid #ebebeb;
    background-image: url('../assets/images/daohang_redIco.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 4px;
    display: flex;
    justify-content: space-between;
    span{
      font-size: 16px;
      color: #333;
    }
    em{
      color: #999;
      font-size: 15px;
      font-style: normal;
    }
  }
  .comment_cont{
    ul{
      li{
        display: flex;
        .author{
          img{
            width: 37px;
            height: 37px;
            margin: auto;
          }
        }
        .com_major{
          width: 86%;
          padding: 0 0 17px 12px;
          h2{
            font-size: 16px;
            color: #333;
            height: 37px;
            line-height: 37px;
          }
          p{
            font-size: 15px;
            color: #595959;
            padding: 6px 0 14px 0;
          }
          .time{
            font-size: 13px;
            color: #999;
            display: flex;
            justify-content: space-between;
            a{
              width: 20px;
              height: 16px;
              display: block;
              background-image: url('../assets/images/commentIco.png');
              background-repeat: no-repeat;
              background-size: 90%;
            }
          }
          .listCom{
            padding: 15px 11px;
            background-color: #fafafa;
            margin-top: 14px;
            .list_head{
              padding-left: 8px;
              height: 25px;
              line-height: 25px;
              background-image: url('../assets/images/daohang_redIco.jpg');
              background-repeat: no-repeat;
              background-position: -1px center;
              background-size: 3px;
              display: flex;
              justify-content: space-between;
              .list_name{
                font-size: 16px;
                color: #333;
              }
              .time{
                color: #999;
                font-size: 13px;
              }
            }
            .list_cont{
              padding: 12px 0 0 8px;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
    .com_more{
      font-size: 15px;
      color: #999;
      padding: 11px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #ebebeb;
      img{
        width: 9px;
        margin-left: 5px;
      }
    }
  }
}
</style>
